<template>
  <div class="tl-cont">
    <!--  信息模块  -->
    <div class="tl-company-msg">
      <div class="tl-title">信息</div>
      <div class="tl-item-cont">
        <ul>
          <li class="tl-item">
            <label><b class="colorRed">* </b>企业类型</label>
            <div class="tl-item-radio">
              <van-radio-group 
              checked-color="#F20B22"
              class="item-radio"
              v-model="formData.individual_business"
            >
              <van-radio
                :name="0">
                企业
                </van-radio>
                <van-radio
                :name="1">
                个体工商户
                </van-radio>
            </van-radio-group>
            </div>
          </li>
          <li class="tl-item">
            <label><b class="colorRed">* </b>企业名称</label>
            <div class="tl-item-input">
              <input placeholder="请填写" v-model="formData.company_name" data-require="1">
            </div>
          </li>
          <li class="tl-item">
            <label><b class="colorRed">* </b>统一社会信用代码</label>
            <div class="tl-item-input">
              <input placeholder="请填写" v-model="formData.uni_credit" data-require="1">
            </div>
          </li>
          <li class="tl-item">
            <label><b class="colorRed">* </b>法人姓名</label>
            <div class="tl-item-input">
              <input placeholder="请填写" v-model="formData.legal_name" data-require="1">
            </div>
          </li>
          <li class="tl-item">
            <label><b class="colorRed">* </b>法人手机号</label>
            <div class="tl-item-input">
              <input placeholder="请填写" v-model="formData.legal_phone" data-require="1">
            </div>
          </li>
          <li class="tl-item">
            <label><b class="colorRed">* </b>法人身份证号</label>
            <div class="tl-item-input">
              <input placeholder="请填写" v-model="formData.legal_ids" data-require="1">
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!--  账户模块  -->
    <div class="tl-company-zh">
      <div class="tl-title">账户</div>
      <div class="tl-item-cont">
        <ul v-if="formData.individual_business === 0">
          <li class="tl-item">
            <label><b class="colorRed">* </b>法人对公账户</label>
            <div class="tl-item-input">
              <input placeholder="请填写" v-model="formData.account_no" data-require="1">
            </div>
          </li>
          <li class="tl-item">
            <label><b class="colorRed">* </b>开户银行</label>
            <div class="tl-item-input">
              <input placeholder="请填写" v-model="formData.parent_bank_name" data-require="1">
            </div>
          </li>
          <li class="tl-item">
            <label><b class="colorRed">* </b>开户行支行</label>
            <div class="tl-item-input">
              <input placeholder="请填写" v-model="formData.bank_name" data-require="1">
            </div>
          </li>
          <li class="tl-item">
            <label><b class="colorRed">* </b>支付行号</label>
            <div class="tl-item-input">
              <input placeholder="请填写" v-model="formData.union_bank" data-require="1">
            </div>
          </li>
        </ul>
        <ul v-else>
          <li class="tl-item">
            <label><b class="colorRed">* </b>银行卡号</label>
            <div class="tl-item-input">
              <input placeholder="请填写" v-model="formData.account_no" data-require="1">
            </div>
          </li>
          <li class="tl-item">
            <label><b class="colorRed">* </b>银行预留手机号</label>
            <div class="tl-item-input">
              <input type="number" placeholder="请填写" v-model="formData.phone" data-require="1">
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!--  提交按钮  -->
    <div class="tl-company-btn">
      <div class="btn-push red-gra-btn" @click="handleSubmitData">开始签署</div>
    </div>
  </div>
</template>

<script>
import { signCompanyContract } from '@/api/user/member/memberApi'
export default {
  name: 'index',
  data() {
    return {
      formData: {
        individual_business: 0,
        company_name: '',
        uni_credit: '',
        legal_name: '',
        legal_ids: '',
        account_no: '',
        parent_bank_name: '',
        bank_name: '',
        union_bank: '',
        legal_phone: '',
        phone: ''
      }
    }
  },
  methods: {
    // 点击提交数据
    handleSubmitData() {
      if (this.formData.individual_business === '') {
        this.$Error('请填写企业类型')
        return false
      }
      if (this.formData.company_name == '') {
        this.$Error('请填写企业名称')
        return false
      }
      if (this.formData.uni_credit == '') {
        this.$Error('请填写统一社会信用代码')
        return false
      }
      if (this.formData.legal_name == '') {
        this.$Error('请填写法人姓名')
        return false
      }
      if (this.formData.legal_phone == '') {
        this.$Error('请填写法人手机号')
        return false
      }
      if (this.formData.legal_ids == '') {
        this.$Error('请填写法人身份证号')
        return false
      }
      if (this.formData.individual_business === 0) {
        if (this.formData.account_no == '') {
          this.$Error('请填写法人对公账户')
          return false
        }
        if (this.formData.parent_bank_name == '') {
          this.$Error('请填写开户银行')
          return false
        }
        if (this.formData.bank_name == '') {
          this.$Error('请填写开户行支行')
          return false
        }
        if (this.formData.union_bank == '') {
          this.$Error('请填写支行行号')
          return false
        }
      } else {
        if (this.formData.account_no == '') {
          this.$Error('请填写银行卡号')
          return false
        }
        if (this.formData.phone == '') {
          this.$Error('请填写银行预留手机号')
          return false
        }
      }
      this.signCompanyContractFun()
    },

    // 点击按钮进行提交注册
    signCompanyContractFun() {
      signCompanyContract(this.formData).then(res => {
        if (res.status == 1) {
          this.$Error('恭喜您签署成功！')
          if (res.data.company_tlfz_need_bind_phone == 1) {
            setTimeout(() => {
              this.$JumpName(this, 'tlQualiBindPhone')
              return false
            }, 1500)
          } else if (res.data.contract_status == 0) {
            setTimeout(() => {
              window.location.href = res.data.company_sign_contract_url
            }, 1500)
          }
        } else {
          this.$Error(res.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .tl-cont {
    .tl-title {
      width: 100%;
      height: 80px;
      line-height: 80px;
      color: #999999;
      font-size: 26px;
      background: #F5F5F5;
      padding-left: 30px;
      box-sizing: border-box;
    }
    .tl-item-cont {
      width: 100%;
      padding: 0 32px;
      box-sizing: border-box;
      background: #fff;
      .tl-item {
        height: 88px;
        line-height: 88px;
        font-size: 28px;
        color: #454545;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        border-bottom: 1px solid #F4F4F6;
        label {
          width: 270px;
        }
        .tl-item-input {
          width: calc(100% - 240px);
          input {
            width: 100%;
            height: 90%
          }
        }
        .tl-item-radio {
          width: calc(100% - 240px);
          .item-radio {
            display: flex;
            height: 100%;
            align-items: center;
            div {
              margin-right: 20px;
            }
          }
        }
      }
    }

    .tl-company-btn {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      background: #fff;
      padding: 12px 26px;
      .btn-push {
        height: 92px;
        line-height: 92px;
        text-align: center;
        font-size: 32px;
        border-radius: 46px;
      }
    }
  }
</style>
